<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-14 09:38:38
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-18 14:24:59
-->
<template>
    <div class="selection">
        <div class="titlebar" @click="goListPage">累计销售回款额对比</div>
        <div class="label">{{ currentYear }}-01 → 至今</div>
    </div>
    <div id="salesBar"></div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, watch, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Combine } from '@/http';
import dateJs from 'dayjs';
import * as echarts from 'echarts';

export default defineComponent({
    name: 'salesBar',
    components: {},
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter();
        const state = reactive({
            currentYear: dateJs(new Date()).format('YYYY'),
            startTime: dateJs(new Date()).format('YYYY-MM-DD'),
            endTime: '',
            modelType: '',
            legendList: [] as any,
            dataList: [] as any,
            list: [] as any,
        });
        onMounted(() => {
            let time = dateJs(state.startTime).add(1, 'day');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1) + '-' + addZeroPrefix(time['$D']);
            getData();
        });
        const goListPage = () => {
            router.push('/hkTable')
        }
        function addZeroPrefix(n) {
            const str = n.toString();
            return str[1] ? str : `0${str}`;
        }
        const getData = () => {
            Combine.GetCreditBySales().then((res: any) => {
                var list = [] as any;
                list = list.concat(res.item2).concat(res.item3);
                state.legendList = [];
                state.dataList = [];
                list.forEach((item) => {
                    state.legendList.push(item.arg1);
                    state.dataList.push(item.val1);
                });
                nextTick(() => {
                    draw(state.legendList, state.dataList);
                });
            });
        };
        const draw = (data1, data2) => {
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#000',
                    },
                    formatter: function (params: any, ticket: any, callback: any) {
                        const item = params[0];
                        var string =
                            '<span style= "padding:0 20px">' +
                            item.name +
                            '</span><br/>' +
                            '<span style = "padding:0 20px"><span style="margin-right:10px">授信额</span>' +
                            item.value +
                            '万元' +
                            '</span>';
                        return string;
                    },
                    fontSize: '12px',
                },
                grid: {
                    top: '10%',
                    left: '2%',
                    right: '2%',
                    bottom: '10%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    minInterval: 1, //只显示整数
                    // data: ['片区','片区','片区','片区','片区','片区','片区','片区','片区','片区'],
                    data: data1,
                    axisLabel: {
                        fontSize: 8,
                        color: '#909399',
                        formatter: function (value, index) {
                            return value.length > 3 ? value.slice(0, 3) + '...' : value;
                        },
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(0,207,255,0.5)',
                        },
                    },
                    //  单独隐藏刻度线：
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['rgba(0,207,255,0.5)'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
                yAxis: {
                    type: 'value', // 种类，类别
                    axisLabel: {
                        show: true,
                        fontSize: 8,
                        margin: 20,
                        textStyle: {
                            color: '#909399',
                        },
                    },
                    axisLine: {
                        show: false,
                        fontSize: 8,
                        margin: 20,
                        textStyle: {
                            color: '#909399',
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    //  单独隐藏刻度线：
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '7',
                        markLine: {
                            data: [{ type: 'average', name: '平均值' }],
                            symbol: ['none', 'none'],
                            label: {
                                position: 'middle',
                                color: '#000',
                                backgroundColor: '#fff',
                                borderColor: '#fff',
                                borderWidth: 8,
                                fontSize: 12,
                                formatter: '平均回款: {c}%',
                            },
                            lineStyle: {
                                color: '#fff',
                                width: 1, // 0 的时候可以隐藏线
                                type: 'solid', // 实线，不写默认虚线
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                        },
                        // data: [100,90,80,70,60,50,40,30,20,10],
                        data: data2,

                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#C00AFF',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(160,5,255,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#00FFB7',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,255,129,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#FFE600',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(255,200,0,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(21,244,247,0.00)',
                                            },
                                        ]),
                                    ];
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                    },
                ],
            };
            let myChart = echarts.init(document.getElementById('salesBar') as HTMLElement);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
            myChart.setOption(option);
        };

        return {
            ...toRefs(state),
            goListPage
        };
    },
});
</script>

<style lang="scss" scoped>
#salesBar {
    margin: 0 20px;
    width: calc(100%-40px);
    height: 250px;
}
.label {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #05f8ff;
    letter-spacing: 0;
    line-height: 30px;
}
#noData {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
